<template>
  <div class="system-info">
    <!-- 面包屑 -->
    <div class="bread-crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>表单模型</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main-middle">
      表单模型
      <form-create ref="fc" v-model="fApi" :rule="rule" :option="option"></form-create>
    </div>
  </div>
</template>

<script>
import formCreate from '@form-create/element-ui';
export default {
  components: {
    formCreate: formCreate.$form()
  },
  data: function () {
    return {
      fApi: {},
      model: {},
      rule: [
        {
          type: 'el-row',
          native: true,
          children: [
            {
              type: 'el-col',
              props: {
                span: 12
              },
              children: [
                {
                  type: 'datePicker',
                  title: '活动日期',
                  field: 'section_day',
                  value: ['2018-02-20 12:12:12', '2018-03-20 12:12:12'],
                  props: {
                    type: 'datetimerange'
                  }
                },
                {
                  type: 'timePicker',
                  title: '活动时间',
                  field: 'section_time',
                  value: ['11:11:11', '22:22:22'],
                  props: {
                    isRange: true,
                    placeholder: '请选择活动时间'
                  }
                }
              ]
            },
            {
              type: 'el-col',
              props: {
                span: 12
              },
              children: [
                {
                  type: 'inputNumber',
                  title: '排序',
                  field: 'sort',
                  value: 0,
                  props: {
                    precision: 2
                  },
                  col: {
                    span: 12
                  },
                  validate: [{ require: true, type: 'number', min: 10 }]
                },
                {
                  type: 'colorPicker',
                  title: '颜色',
                  field: 'color',
                  value: '#ff7271',
                  props: {
                    hue: true,
                    format: 'hex'
                  },
                  col: {
                    span: 12
                  }
                }
              ]
            }
          ]
        }
      ],
      option: {
        onSubmit: function (formData) {
          alert(JSON.stringify(formData));
        }
      }
    };
  },
  mounted: function () {
    this.model = this.fApi.model();
  }
};
</script>

<style lang='scss'>
@import './index.scss';
</style>
